<!--  -->
<template>
  <div>
    <div class="pet-description container">
      <h1>宝贝详情</h1>
      <div class="goods-details">
        <ul>
          <li v-for="(item, i) in proInfo.baseAttrs" :key="i">
            {{ item.attrName }}：{{ item.attrValues }}
          </li>
          <!-- <li>毛长：短毛</li>
          <li>种类：家庭够</li>
          <li>宠物提醒：中型犬</li>
          <li>产地：中国</li> -->
        </ul>
      </div>
      <img :src="item" v-for="item in proInfo.decript" :key="item" alt="" />
    </div>
    <div>
      <Comment id="comment"></Comment>
    </div>
  </div>
</template>

<script>
import Comment from "./Comment";
export default {
  name: "Pettitle",
  props: {
    proInfo: { type: Object },
  },
  data() {
    return {};
  },
  components: {
    Comment,
  },
  created() {
    console.log("pinlun", this.proInfo);
  },
  methods: {},
};
</script>
<style lang="less" scoped>
@import "../../assets/css/total.less";
.pet-description {
  background-color: rgb(230, 227, 227);
  box-sizing: border-box;
  padding: 20px;

  border-bottom: 2px dashed #ccc;
  .goods-details {
    margin-left: 100px;
    height: 100px;
    width: 1000px;
    background-color: rgb(230, 227, 227);
    li {
      float: left;
      margin: 5px 10px;
      width: 300px;
      height: 30px;
      font-size: 20px;
    }
  }
  h1 {
    height: 50px;
    padding: 30px;
    font-weight: 700;
    line-height: 50px;
    font-size: 50px;
  }
  img {
    height: 500px;
    width: 800px;
    display: flex;
    top: 0;
    left: 0;
    margin: auto;
  }
  .description {
    p {
      font-size: 25px;
      text-indent: 50px;
      line-height: 30px;
    }
    .info1 {
      span {
        display: block;
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        font-size: 35px;
        margin: 10px 0;
        text-indent: 50px;
      }
      p {
        font-size: 25px;
        text-indent: 50px;
        line-height: 30px;
      }
      ul {
        li {
          text-indent: 50px;
          font-size: 25px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
